<template>
  <a-spin :spinning="loading">
    <a-card v-for="(item,index) in statisticsTitleList" :key="index" :bordered="false">
      <template #title>
        <span>{{ item.name }}</span>
      </template>
      <div class="data_parent_card">
        <a-card class="data_card" v-for="(item,index) in item.titleList" :key="index">
          <div class="data_card_content">
            <span class="data_card_title">{{ item.name }}</span>
            <span class="data_card_value">{{ statisticsValue[item.key] }}</span>
            <a-space class="data_card_contrast" size="large">
              <span>较前天</span>
              <span :style="{color: statisticsValue[item.key + 'Compare']>=0?'#1da57a':'red'}">
                {{
                  statisticsValue[item.key + 'Compare'] === 0 ? '- -' : statisticsValue[item.key + 'Compare'] > 0 ? '+' + statisticsValue[item.key + 'Compare'] : statisticsValue[item.key + 'Compare']
                }}
              </span>
            </a-space>
          </div>
        </a-card>
      </div>
      <a-divider>数据趋势</a-divider>
      <div :ref="`chart-${item.key}`" class="chart_card"></div>
    </a-card>
  </a-spin>
</template>

<script>
import { defineComponent, getCurrentInstance, nextTick, onMounted, reactive, toRefs } from 'vue'
import { GetUserStatisticsData } from '@/service/statistics'
import { Line } from '@antv/g2plot'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      loading: true,
      statisticsTitleList: [{
        key: 'blog',
        name: '博客数据',
        titleList: [{
          key: 'blogTotal',
          name: '总博客数'
        }, {
          key: 'likes',
          name: '总点赞数'
        }, {
          key: 'pageViews',
          name: '总阅读数'
        }]
      }, {
        key: 'follow',
        name: '关注数据',
        titleList: [{
          key: 'followers',
          name: '总粉丝数'
        }, {
          key: 'followUp',
          name: '新增关注'
        }, {
          key: 'followDown',
          name: '取消关注'
        }]
      }],
      statisticsValueList: [],
      statisticsValue: {}
    })

    const methods = reactive({})

    onMounted(async () => {
      state.statisticsValueList = await GetUserStatisticsData()
      state.statisticsValue = state.statisticsValueList[state.statisticsValueList.length - 1]
      await nextTick(async () => {
        const dataArr = {}
        state.statisticsTitleList.forEach(item => {
          dataArr[item.key] = []
          state.statisticsValueList.forEach((statistics) => {
            item.titleList.forEach(childItem => {
              dataArr[item.key].push({
                date: statistics.date,
                value: statistics[childItem.key],
                category: childItem.name
              })
            })
          })
        })
        new Line(proxy.$refs['chart-blog'], {
          data: dataArr.blog,
          xField: 'date',
          yField: 'value',
          seriesField: 'category',
          yAxis: {
            grid: {
              line: null
            }
          }
        }).render()
        new Line(proxy.$refs['chart-follow'], {
          data: dataArr.follow,
          xField: 'date',
          yField: 'value',
          seriesField: 'category',
          yAxis: {
            grid: {
              line: null
            }
          }
        }).render()
        state.loading = false
      })
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="less" scoped>
.data_parent_card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  & .data_card {
    width: 30%;
    background-color: #00000005;

    & .data_card_content {
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & .data_card_value {
        font-size: 32px;
        font-weight: 700;
      }
    }
  }
}

.chart_card {
  height: 500px;
}

@media screen and (max-width: 1000px) {
  .data_parent_card {
    & .data_card {
      width: 100%;
      margin: 5px 0;
    }
  }
}
</style>
